<template>
  <el-container>
    <el-header style="background-color:#eff2f7" class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/addShop' }">添加数据</el-breadcrumb-item>
        <el-breadcrumb-item>添加商铺</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- header右侧头像开始 -->
      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div class="poputs">
          <div @click="tzHome">首页</div>
          <div @click="tzLogin">退出</div>
        </div>
      </div>
      <!-- header右侧头像结束 -->
    </el-header>
    <el-main style="background-color:#ffffff" class="main">
      <el-form :rules="rules" :model="ruleForm" class="demo-ruleForm biaoge" style="margin:0 auto">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="ruleForm.name" style="width:700px"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="name1">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
            style="width:700px;z-index:999"
          ></el-autocomplete>
          <br />
          <span style="margin-left:75px">当前城市：深圳</span>
        </el-form-item>
        <el-form-item label="联系电话" prop="name2">
          <el-input v-model="ruleForm.name2" style="width:700px"></el-input>
        </el-form-item>
        <el-form-item label="店铺简介">
          <el-input v-model="ruleForm.name3" style="width:700px;margin-left:10px"></el-input>
        </el-form-item>
        <el-form-item label="店铺标语">
          <el-input v-model="ruleForm.name4" style="width:700px;margin-left:10px"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类">
          <el-cascader :options="options" clearable style="margin-left:10px"></el-cascader>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          品牌保证
          <el-switch v-model="ruleForm.delivery" style="margin:5px"></el-switch>蜂鸟专送
          <el-switch v-model="ruleForm.delivery1" style="margin:5px"></el-switch>新开店铺
          <el-switch v-model="ruleForm.delivery2" style="margin:5px"></el-switch>
        </el-form-item>
        <el-form-item prop="delivery" style="margin-left:70px">
          外卖保
          <el-switch v-model="ruleForm.delivery3" style="margin:5px"></el-switch>准时达
          <el-switch v-model="ruleForm.delivery4" style="margin:5px"></el-switch>开发票
          <el-switch v-model="ruleForm.delivery5" style="margin:5px"></el-switch>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input-number v-model="num" :min="1" :max="20"></el-input-number>
        </el-form-item>
        <el-form-item label="起送价">
          <el-input-number v-model="num1" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }"
          ></el-time-select>
          <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            style="margin-left:15px"
            :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
                minTime: startTime
              }"
          ></el-time-select>
        </el-form-item>
        <el-form-item label="上传店铺头像">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div style="border: 1px solid #ccc;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传营业执照">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div style="border: 1px solid #ccc;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传餐饮服务许可证">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div style="border: 1px solid #ccc;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="优惠活动" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="满减优惠" value="满减优惠">
              <el-button
                type="text"
                @click="open('减','满减优惠')"
                style="width:100%;text-align:left"
              >满减优惠</el-button>
            </el-option>
            <el-option label="优惠大酬宾" value="优惠大酬宾">
              <el-button
                type="text"
                @click="open('特','优惠大酬宾')"
                style="width:100%;text-align:left"
              >优惠大酬宾</el-button>
            </el-option>
            <el-option label="新用户立减" value="新用户立减">
              <el-button
                type="text"
                @click="open('新','新用户立减')"
                style="width:100%;text-align:left"
              >新用户立减</el-button>
            </el-option>
            <el-option label="进店领卷" value="进店领卷">
              <el-button
                type="text"
                @click="open('领','进店领卷')"
                style="width:100%;text-align:left"
              >进店领卷</el-button>
            </el-option>
          </el-select>
        </el-form-item>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="biaoq" label="活动标题" width="180"></el-table-column>
          <el-table-column prop="name" label="活动名称" width="180"></el-table-column>
          <el-table-column prop="value" label="活动详情" width="350"></el-table-column>
          <el-table-column prop="operation" label="操作" >
            <template slot-scope="item">
              <el-button @click="del(item.$index)" class="delbtn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-main>
  </el-container>
</template>
<style scoped>
.block {
  position: relative;
}
.poputs {
  position: absolute;
  top: 55px;
  left: -20px;
  width: 80px;
  height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 2px 3px 10px -1px #333;
  display: none;
}
.block:hover .poputs {
  display: block;
}
.poputs > div {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #000;
  cursor: pointer;
}
.poputs > div:hover {
  background-color: #e4e8f1;
  color: #333;
}

.biaoge {
  width: 800px !important;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.delbtn{
  border-radius: 5px;
  background: #ff4949;
  color: #fff;
  border: none;
  outline: none;
}
</style>
<script>
export default {
  data() {
    return {
      circleUrl: "https://img01.sogoucdn.com/app/a/100520093/fb41c7c77a2454f7-01eba5833e7e38bc-11cc0200d4b834a0dddb28091fd46806.jpg",  //头像地址
      num: 5,
      num1: 15,
      startTime: "",
      endTime: "",
      imageUrl: "",
      sum: 0,
      ruleForm: {
        name: "",
        name1: "",
        name2: "",
        region: "",
        delivery: true,
        delivery1: true,
        delivery2: true,
        delivery3: true,
        delivery4: true,
        delivery5: true,
      },
      // 上面提示框的内容
      rules: {
        name: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        name1: [
          { required: false, message: "请输入详细地址", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        name2: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { min: 1, max: 11, message: "请输入正确的手机号", trigger: "blur" },
        ],
      },
      // 最后表单的内容
      tableData: [],  //最后存表格内容的
      options: [],   //存店铺和菜系的
      address: [],   // 存地址的
      state: '',
      timeout:  null
    };
  },
  methods: {
    // 顶部头像的点击事件
    tzHome(){
      this.$router.push({path:'/home'});
    },
    tzLogin(){
      this.$router.push({path:'/login'});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传头像的格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 弹出框的内容
    open(bq, val) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "内容不能为空",
      })
        .then(({ value }) => {
          this.tableData.push({
            biaoq: bq,
            name: val,
            value: value,
            operation: this.sum,
          });
          this.sum += 1;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 删除当前内容
    del: function (index) {
      this.tableData.splice(index, 1);
    },


    // 搜索地址
    querySearchAsync(queryString, cb) {
        var address = this.address;
        var results = queryString ? address.filter(this.createStateFilter(queryString)) : address;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },


  // 生命周期
  mounted() {

    // 店铺分类
    this.$axios
      .get("https://elm.cangdu.org/shopping/v2/restaurant/category")
      .then((res) => {
        res.data.forEach((item) => {
          if (item.sub_categories.length) {
            const addnew = {
              value: item.name,
              label: item.name,
              children: [],
            };
            item.sub_categories.forEach((subitem, index) => {
              if (index == 0) {
                return;
              }
              addnew.children.push({
                value: subitem.name,
                label: subitem.name,
              });
            });
            this.options.push(addnew);
          }
        });
      });


    // 获取地址
    this.$axios
      .get(
        "https://elm.cangdu.org/v1/pois?city_id=11&keyword=%E6%B7%B1%E5%9C%B3&type=search"
      )
      .then((res) => {
        // this.address = res.data
        // this.address.forEach((item)
        res.data.forEach((item)=>{
            this.address.push({
              value:item.address,
              address:item.address
              })
            // console.log(item)
        })
        // console.log(this.address)
      });
  },
};
</script>